<template>
  <div>
    <!-- 搜索框 -->
    <div class="dingbu">
      <van-nav-bar title="搜索页" left-text="返回" left-arrow @click-left="onClickLeft" />
      <input type="text" class="input" v-model="inputText" @input="search" />
      <button class="sousuo" @click="searchData">搜索</button>
    </div>
    <!-- 实时搜索 -->
    <div class="shishi">
      <div style="margin-top: 10px;" v-for="(v, i) in searchlist" :key="i">
        <p>{{ v }}</p>
      </div>
    </div>
    <!-- 搜索记录 -->
    <div>
      <h3>历史搜索<span style="font-weight: normal;margin-left: 10px;position: absolute;right: 0;" @click="qc">清空</span>
      </h3>
      <van-tag style="padding: 5px;" size="medium" @close="sc(v)" v-for="(v, j) in historyList" :key="j">
        {{ v }}X
      </van-tag>
    </div>
    <!-- 普通搜索 -->
    <div class="putong" v-for="(v, j) in getlist" :key="j" @click="xq(v.id)">
      <div>
        <img :src="v.doctor_info.image" alt="" />
      </div>
      <div>
        <h3>{{ v.doctor_info.name }}</h3>
        <p>
          <span style="color:#666666">{{ v.doctor_info.title }}</span>&nbsp;
          <span style="color:#666666">{{ v.doctor_info.clinic_name }}</span>
        </p>
        <div style="color:#666666">{{ v.doctor_info.hospital_name }}</div>
        <p>
          <span style="background: #09c27b; color: #fff;font-size:14px">三甲</span>
          <span style="margin-left:5px;background: #f7e9d2;color: #91632f;font-size:14px">{{
            v.doctor_info.new_tags[0].name
          }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const onClickLeft = () => history.back()
import { ref, watch } from 'vue'
import { getdocter } from '../../request/http'
let inputText = ref<any>('')
const searchlist = ref<any>([])
const springData = ref<any>([])
const shishi = ref<any>([
  '感冒咳嗽',
  '感冒发烧666',
  '感冒流鼻涕',
  '感冒清热颗粒',
  '感冒药',
  '感冒鼻塞',
  '感冒后咳嗽',
  '感冒灵颗粒',
  '感冒发热',
  '发烧咳嗽颗粒',
  '发烧清热胶囊',
  '发烧软胶囊',
  '发烧灵片',
  '发烧清片',
  '发烧灵冲剂',
  '发烧灵胶囊',
  '发烧颗粒',
  '发烧',
  '发烧胶囊',
  '发烧安片'
])
const search = () => {
  if (inputText.value == '') {
    searchlist.value = []
  } else {
    console.log(inputText.value, '111')
    const aaa = [...shishi.value]
    const bbb = aaa.filter((item) => item.includes(inputText.value))
    searchlist.value = bbb
  }
}
getdocter().then((res) => {
  springData.value = res.data.doctors
  console.log(springData.value, 465132);
})

const historyList = ref(JSON.parse(localStorage.getItem('historyList') || '[]'))
watch(historyList, () => {
  console.log('111');
  localStorage.setItem('historyList', JSON.stringify(historyList.value))
})
const getlist = ref<any>([])
const searchData = () => {
  historyList.value = [...new Set([inputText.value, ...historyList.value])]
  getlist.value = springData.value.filter((item: { doctor_info: { name: string | any[]; }; }) => {
    return item.doctor_info.name.includes(inputText.value)
  })
  searchlist.value = '';
}
const qc = () => {
  localStorage.removeItem('history')
  historyList.value = []
}

const sc = (v: string) => {
  historyList.value = historyList.value.filter((item: string) => {
    return item !== v
  })
}
</script>

<style lang="scss" scoped>
// 搜索框
.dingbu {
  width: 100%;
  height: 100px;

  .input {
    height: 30px;
    width: 70%;
    position: relative;
    top: 10px;
    border-radius: 50px;
    border: 1px solid #2ebb89;
  }

  .sousuo {
    position: absolute;
    top: 55px;
    right: 0px;
    height: 30px;
    width: 20%;
    border-radius: 50px;
    background-color: #2ebb89;
    border: 0px;
    color: #fff;
  }
}

// 实时搜索
.shishi {
  width: 100%;
  height: 100%;
  margin-top: 15px;
  margin-bottom: 10px;
}

// 热门搜索
.remen {
  width: 100%;
  height: 140px;

  .remen1 {
    background: #e6e6e6;
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    border-radius: 10px;
    font-size: 13px;
    height: 25px;
    line-height: 25px;
    width: 90px;
    text-align: center;

  }
}

// 普通搜索
.putong {
  display: flex;
  line-height: 38px;
  margin-top: 10px;

  img {
    height: 100px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 40px;
  }
}

// 底部图片
.tupian {
  width: 100%;
  height: 140px;
  margin-top: 20px;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
